<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)1998 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun,
J. Brook Monroe nor Charles River Media will be held responsible for any
unwanted effects due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>Getting the Picture I</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
var alien;
var eye;
function Setup()
{
var j = 1;
// Create the images
alien = new Image();
eye = new Image();
// Load graphics into the images
alien.src = "../GRAFX/MOUSEOVR/ALIEN.GIF"
eye.src = "../GRAFX/MOUSEOVR/EYE.GIF";
// Assign images to the HTML array of images.
for(var i = 1; i < document.images.length; i++) {
if((j % 2) == 0)
document.images[i].src = alien.src;
else
document.images[i].src = eye.src;
j++;
if((j % 5) == 0)
j++;
}
}
//-->
</SCRIPT>
<BODY>
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50 ALIGN = LEFT>Getting the Picture I</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
In this recipe we cache images to cut down on load times.
</FONT><P>
<CENTER>
<IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><BR>
<IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><BR>
<IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><BR>
<IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><IMG SRC="" HEIGHT=34 WIDTH=34><BR>
</CENTER><BR>
<SCRIPT LANGUAGE="JavaScript1.2">Setup()</SCRIPT>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
Quiz time: what does the following fragment of HTML do?<PRE>
<IMG SRC="" HEIGHT=34 WIDTH=34></PRE>
Your first response is probably that this isn't legal, but it is. The browser reserves a 34x34 block of space for an image,
but doesn't load anything into the space. The HTML in this recipe does this 16 times to create space for the grid
above. Then we use JavaScript to "fill in the blanks."<P>
The two bitmaps are loaded through the use of <kbd>Image</kbd> objects in JavaScript:<pre>
<FONT COLOR="770000">
var alien;
var eye;
function Setup()
{
var j = 1;
<FONT COLOR="007777">// Create the images</FONT>
alien = new Image();
eye = new Image();
<FONT COLOR="007777">// Load graphics into the images</FONT>
alien.src = "../GRAFX/MOUSEOVR/ALIEN.GIF"
eye.src = "../GRAFX/MOUSEOVR/EYE.GIF";
<FONT COLOR="007777">// Assign images to the HTML array of images.</FONT>
for(var i = 1; i < document.images.length; i++) {
if((j % 2) == 0)
document.images[i].src = alien.src;
else
document.images[i].src = eye.src;
j++;
if((j % 5) == 0)
j++;
}
}
</PRE></FONT>
It's important to notice that you <b>must</b> specify the <FONT COLOR="770000">src</FONT> attribute when
loading images this way; <kbd>document.images[3]="myBitmap.jpg"</kbd> is not legal and will generate
an error.<p>
The browser only loads two images to create the grid, and that can be important when you need to duplicate
a graphic many times across a page. Inserting <kbd><IMG SRC="myBitmap.jpg"></kbd> into the
HTML source over and over will cause the browser to load multiple copies of the image--which slows down page loading.
By inserting "empty" images, then filling them with JavaScript-cached copies, you can speed up page display
and cut down on network traffic at the same time.
</FONT>
<BR><BR><h5>Copyright ©1998 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>